<%--
  User: 86159 Date: 2020/12/22   Time: 8:57    Author: 宸宸
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>登录注册 - TianYun</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/LoginAndRegistration/css/style.css?v=<%= System.currentTimeMillis()%>">
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/LoginAndRegistration/js/jquery-1.10.2.js"></script>
    <script src="${pageContext.request.contextPath}/LoginAndRegistration/js/message.min.js"></script>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/LoginAndRegistration/css/message.css?v=<%= System.currentTimeMillis()%>">
    <script src="${pageContext.request.contextPath}/js/verify/code.js"></script>

    <link href="${pageContext.request.contextPath}/LoginAndRegistration/motai/component.css?v=<%= System.currentTimeMillis()%>"
          rel="stylesheet">
    <style>
        /* 非组件样式 */
        .btn {
            margin-right: 20px;
        }

        .p40 {
            padding: 40px;
        }

        .mt20 {
            margin-top: 20px;
        }


        .code {
            padding-top: 50px;
            width: 400px;
            margin: 0 auto;
        }

        #canvas {
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }

        .wjmm {
            text-decoration: none;
        }

        .wjmm:hover {
            color: #f8cf39;
            text-decoration: none;
        }

    </style>

</head>

<body>
<div class="content">
    <div class="form sign-in">
        <h2>欢迎回来</h2>
        <label>
            <input type="text" id="login-account" placeholder="请输入账号" tabindex="1" maxlength="15">
        </label>
        <label>
            <input type="password" id="login-password" placeholder="请输入密码" tabindex="1" maxlength="15">
        </label>
        <p class="forgot-pass"><a href="javascript:" style="font-size: 15px;"
                                  class="wjmm md-trigger btn btn-primary btn-sm" data-modal="modal-7">忘记密码？</a></p>
        <button type="button" class="submit" id="loginButton">登 录</button>
    </div>
    <div class="sub-cont">
        <div class="img">
            <div class="img__text m--up">
                <h2>还未注册？</h2>
                <p>立即注册，发现大量机会！</p>
            </div>
            <div class="img__text m--in">
                <h2>已有帐号？</h2>
                <p>有帐号就登录吧，好久不见了！</p>
            </div>
            <div class="img__btn">
                <span class="m--up">注 册</span>
                <span class="m--in">登 录</span>
            </div>
        </div>
        <div class="form sign-up">
            <h2>立即注册</h2>
            <form id="myForm" action="${pageContext.request.contextPath}/UserServlet?opr=register" method="post">
                <span hidden><input name="uId" hidden></span>
                <label>
                    <input type="text" name="userName" id="register-username" placeholder="请输入用户名" tabindex="1"
                           maxlength="15">
                </label>
                <label>
                    <input type="text" name="userAccount" id="register-account" placeholder="请输入账号" tabindex="1"
                           maxlength="15">
                </label>
                <label>
                    <input type="password" name="userPassword" id="register-password" placeholder="请输入密码" tabindex="1"
                           maxlength="15">
                </label>
                <label>
                    <input type="email" name="userEmail" id="register-zcm" placeholder="请输入邮箱" tabindex="1"
                           maxlength="20">
                </label>
                <label>
                    <input type="text" value="" placeholder="请输入验证码" class="input-val">
                    <canvas id="canvas" width="100" height="43" data-code="35n1"></canvas>
                </label>
                <%--<input type="submit" class="submit" value="提交">--%>
                <button type="submit" class="submit" id="registerButton">注 册</button>
            </form>
        </div>
    </div>
</div>

<div class="md-modal md-effect-7" id="modal-7">
    <div class="md-content">
        <div class="logo"><a href=""><img width="100%" height="100%"
                                          src="${pageContext.request.contextPath}/img/logo.e642e65.png"
                                          alt=""></a></div>
            <h2 style="color: #f8cf39">找回密码</h2>
            <div>
                <ul>
                    <label>
                        <input name="email" id="email" placeholder="请输入邮箱" tabindex="1" maxlength="20">
                    </label>
                </ul>
                <button class="submit" id="zhButton">找回密码</button>
                <button class="md-close submit">关闭</button>
            </div>
    </div>
</div>
<%--/*message:'失败提示',
type:'error'*/
/*message:'警告提示',
type:'warning'*/
/* message:'信息提醒',
type:'info'*/--%>
<div class="md-overlay"></div>

<script src="${pageContext.request.contextPath}/LoginAndRegistration/motai/classie.js"></script>
<script src="${pageContext.request.contextPath}/LoginAndRegistration/motai/modalEffects.js"></script>


<script src="${pageContext.request.contextPath}/LoginAndRegistration/js/script.js"></script>
</body>

<script>
    let url = "<%=basePath%>/UserServlet";

    function ajax(url, data, dataType = 'JSON', type = 'POST') {
        return new Promise(function (resolve, reject) {
            $.ajax({
                url: url,
                data: data,
                dataType: dataType,
                type: type,
                success: function (res) {
                    resolve(res)
                },
                error: function (res) {
                    reject(res)
                }
            })
        })
    }

    /*登录*/
    $(document).on("click", "#loginButton", function () {
        let account = document.getElementById("login-account").value
        console.log(account);
        let pwd = document.getElementById("login-password").value
        console.log(pwd);
        let data = {"opr": "login", "account": account, "pwd": pwd}
        ajax(url, data).then(function (res) {
            console.log(res);
            if (account === "" || account === null || account === undefined) {
                $.message({
                    message: '请输入账号',
                    type: 'info'
                })
                return false;
            } else if (pwd === "" || pwd === null || pwd === undefined) {
                $.message({
                    message: '请输入密码',
                    type: 'info'
                })
                return false;
            } else if (res === false) {
                $.message({
                    message: '用户名或密码输入错误，请重新输入',
                    type: 'error'
                })
            } else {
                $.message('登录成功');
                window.location.href = "index.jsp";
            }
        })
    })

    /*注册*/
    $(document).on("click", "#registerButton", function () {
        let name = document.getElementById("register-username").value
        console.log(name);
        let account = document.getElementById("register-account").value
        console.log(account);
        let pwd = document.getElementById("register-password").value
        console.log(pwd);
        let zcm = document.getElementById("register-zcm").value
        console.log(zcm);

        // 将输入的内容转为大写，可通过这步进行大小写验证
        var val = $(".input-val").val().toLowerCase();
        // 获取生成验证码值
        var num = $('#canvas').attr('data-code');

        if (name === "" || name === null || name === undefined) {
            $.message({
                message: '请输入用户名',
                type: 'info'
            })
            return false;
        } else if (account === "" || account === null || account === undefined) {
            $.message({
                message: '请输入账号',
                type: 'info'
            })
            return false;
        } else if (pwd === "" || pwd === null || pwd === undefined) {
            $.message({
                message: '请输入密码',
                type: 'info'
            })
            return false;
        } else if (zcm === "" || zcm === null || zcm === undefined) {
            $.message({
                message: '请输入邮箱',
                type: 'info'
            })
            return false;
        } else if (val == '') {
            $.message({
                message: '请输入验证码',
                type: 'info'
            })
            return false;
        } else if (val == num) {
            $.message('注册成功');
            /*$(".input-val").val('');
            draw(show_num);*/
        } else {
            $.message({
                message: '验证码错误，请重新输入',
                type: 'warning'
            });
            $(".input-val").val('');
            draw(show_num);
            return false;
        }
    })
    $(document).on("button", "#myForm", function () {

        var action = this.action;
        console.log(action);
        var data = decodeURIComponent($(this).serialize());
        ajax(action, data).then(function (rs) {
            console.log(rs);
            if (rs === true) {
                $.message('注册成功');
            }
        })
        return false
    })
</script>

<script>
    $(document).on("click", "#zhButton", function () {
        let email = document.getElementById("email").value

        if (email === "" || email === null || email === undefined) {
            alert("请输入邮箱")
            return false;
        } else if (email != /\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*/) {
            alert("邮箱格式不正确请确认")
            return false;
        }
        return alert("邮件已发送请，及时查看邮箱");
    })
</script>
<script>
    $(function () {
        code_draw();
        // 点击后刷新验证码
        $("#canvas").on('click', function () {
            code_draw();
        })
    })
</script>
</html>